import React, { Component } from 'react';
import styled from 'styled-components';
import { Modal } from 'antd-mobile';
import axios from '../util/axios'
import '../css/style.css'
import format from '../util/format'
import coll1 from '../images/coll1.png';
import coll2 from '../images/coll2.png';

const NewsDiv = styled.div`
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.head{
    height: 40px;
    width: 100%;
    background-color: #dd3635;
    display: flex;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
}
.content_info{
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}



.back_btn{
    color: #ffffff;
    font-size: 16px;
}

.back_btn::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 3px solid #ffffff;
    border-top: 3px solid #ffffff;
    transform: rotate(-45deg);
}


.foot{
    height: 40px;
    width: 100%;
    border-top: 1px solid #c4c4c4;
    display: flex;
}

.cbox{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

.coll_btn{
    display: inline-flex;
    font-size: 12px;
    color: #dd3635;
    align-items: center;
}

.coll_btn::before{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(${coll2}) no-repeat;
    background-size: contain;
    margin-right: 5px;
}

.cancel_btn{
    display: inline-flex;
    font-size: 12px;
    color: #dd3635;
    align-items: center;
}

.cancel_btn::before{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(${coll1}) no-repeat;
    background-size: contain;
    margin-right: 5px;
}

.titlebox{
    box-sizing: border-box;
    padding: 12px 0;
}

.titlebox>h1{
    font-size: 24px;
    color: #222222;
}

.infoitem{
    box-sizing: border-box;
    padding: 5px 0;
    display: flex;
    align-items: flex-end;
}

.source{
    color: #222222;
    font-size: 16px;
    margin-right: 8px;
    line-height: 20px;
}
.pubtime{
    font-size: 14px;
    color: #a5a5a5;
    line-height: 15px;
}

.infobox>p.one-p{
    font-size: 16px;
    color: #222222;
    margin-bottom: 10px;
}

.infobox img{
    width: 100% !important;
}   
`

class Newsinfo extends Component {
    state = {
        list: [],
        aid: '',//保存文章id
        flag: false, //记录收藏状态
        uid: ''
    }

    componentDidMount() {
        // console.log(this.props.match.params.id)//文章id
        //获取新闻信息
        this.setState({
            aid: this.props.match.params.id
        }, function () {
            axios.post('/newsinfo', { newsid: this.state.aid }).then(res => {
                // console.log(res)
                if (res.status === 'success') {
                    this.setState({
                        list: res.data
                    })
                }
            }).catch(err => {
                console.log(err)
            })

            let uu = localStorage.getItem("userinfo");
            if (uu) {
                uu = JSON.parse(uu)
                this.setState({
                    uid: uu._id
                }, function () {
                    //查看是否收藏文章
                    axios.post('/checkcollect', {
                        newsid: this.state.aid,
                        uid: this.state.uid
                    }).then(res => {
                        // console.log(res)
                        this.setState({  //将文章收藏信息赋值给flag
                            flag: res.data
                        })
                    }).catch(err => {
                        console.log(err)
                    })
                })
            }
        })

    }
    //点击收藏时
    gocoll = () => {
        if (this.state.uid) { //判断用户是否登录
            axios.post('/collect', {
                aid: this.state.aid,
                uid: this.state.uid
            }).then(res => {
                if (res.status === 'success') {
                    this.setState({
                        flag: true
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        } else {
            Modal.alert({
                content: '当前账号未登录',
                confirmText: "前往登录",
                onConfirm: () => {
                    this.props.history.push('/login')
                }
            })
        }
    }
    //点击取消收藏时
    subcoll = () => {
        axios.post('/cancelCollect', {
            aid: this.state.aid,
            uid: this.state.uid
        }).then(res => {
            if (res.status === 'success') {
                this.setState({
                    flag: false
                })
            }
        }).catch(err => {
            console.log(err)
        })
    }


    render() {
        if (this.state.list.type === "财经") {
            return (
                <>
                    <NewsDiv>
                        <div className="head">
                            <a className="back_btn" onClick={() => {
                                this.props.history.go(-1)
                            }}>返回</a>
                        </div>
                        <div className="content_info">

                            <div className="titlebox">
                                <h1>{this.state.list.title}</h1>
                                <div className="infoitem">
                                    <span className="source">
                                        来源：{this.state.list.media}
                                    </span>
                                    <span className="pubtime">{format.toYMD(this.state.list.pubtime)}</span>
                                </div>
                            </div>



                            <div className="infobox" dangerouslySetInnerHTML={{ __html: this.state.list.content }}>


                            </div>

                        </div>
                        <div className="foot">
                            <div className="cbox">
                                {this.state.flag ? <b className="cancel_btn" onClick={this.subcoll}>取消收藏</b> : <b className="coll_btn" onClick={this.gocoll}>收藏</b>}

                            </div>

                        </div>
                    </NewsDiv>



                </>
            );
        }
        return (
            <>
                <NewsDiv>
                    <div className="head">
                        <a className="back_btn" onClick={() => {
                            this.props.history.go(-1)
                        }}>返回</a>
                    </div>
                    <div className="content_info">

                        <div className="titlebox">
                            <h1>{this.state.list.title}</h1>
                            <div className="infoitem">
                                <span className="source">
                                    来源：{this.state.list.source}
                                </span>
                                <span className="pubtime">{format.toYMD(this.state.list.time)}</span>
                            </div>
                        </div>



                        <div className="infobox" dangerouslySetInnerHTML={{ __html: this.state.list.context }}>


                        </div>

                    </div>
                    <div className="foot">
                        <div className="cbox">
                            {this.state.flag ? <b className="cancel_btn" onClick={this.subcoll}>取消收藏</b> : <b className="coll_btn" onClick={this.gocoll}>收藏</b>}

                        </div>
                    </div>
                </NewsDiv>



            </>
        );
    }
}

export default Newsinfo;
